Skip to content

improve: refactor AppLoadingProgress for better UX#192

Merged
coji merged 1 commit intomainfrom
improve/loading-progress
Mar 16, 2026
Merged

improve: refactor AppLoadingProgress for better UX#192
coji merged 1 commit intomainfrom
improve/loading-progress

Conversation

@coji
Copy link
Owner

@coji coji commented Mar 16, 2026 •
edited by coderabbitai bot
Loading

Summary

  • Extract nextProgress() pure function and useLoadingProgress() hook for better cohesion
  • Add 150ms show delay to skip bar for fast navigations (no more flicker)
  • Fix timer leak: all setTimeout/setInterval properly cleaned up on unmount
  • Visual: blue-500 color, shimmer effect, thinner bar (h-0.5), proper z-index

Test plan

  • Slow navigation (>150ms): blue progress bar appears, trickles, snaps to 100%, fades out
  • Fast navigation (<150ms): no bar shown
  • Rapid consecutive navigations: no stale bars or visual glitches
  • Works in both light and dark mode

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

  • Improvements
    • Enhanced the loading progress indicator with smoother animations and refined visual transitions during page navigation. The progress bar now provides better visual feedback with improved timing and transitions for an overall smoother user experience during navigation events.

@coji @claude
improve: refactor AppLoadingProgress for better UX and maintainability
abf7f65 
- Extract nextProgress() pure function for asymptotic easing logic
- Extract useLoadingProgress() hook for phase/timer lifecycle management
- Add 150ms delay to skip showing bar for fast navigations
- Fix timer leak: cleanup all setTimeout/setInterval on unmount
- Visual improvements: blue-500 color, shimmer effect, thinner bar, z-50

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@coderabbitai
Copy link

coderabbitai bot commented Mar 16, 2026 •
edited
Loading

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1ccebed2-e272-4a27-a9b0-b3aed6799f84

📥 Commits

Reviewing files that changed from the base of the PR and between 39faa90 and abf7f65.

📒 Files selected for processing (1)
  • app/components/AppLoadingProgress.tsx
📝 Walkthrough

Walkthrough

Enhanced AppLoadingProgress component with phased loading logic. Added asynchronous progress management including delayed visibility, interval-driven updates with easing, and multi-phase state transitions (idle → waiting → loading → completing). Preserved public API while introducing internal state coordination and cleanup handlers.

Changes

Cohort / File(s) Summary
Loading Progress Enhancement
app/components/AppLoadingProgress.tsx		 Implemented phased loading progress system with four states: idle, waiting, loading, and completing. Added nextProgress() for asymptotic easing, SHOW_DELAY_MS constant for delayed visibility, and useLoadingProgress() internal hook for state management. Introduced useRef-based internal state coordination (phase, progress, timers) with comprehensive cleanup logic for delay, interval, and fade transitions.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Progress phases dance and flow,
From waiting dreams to loading's glow,
Through easing curves and shimmer bright,
Each phase completes the loading rite! ✨

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch improve/loading-progress
📝 Coding Plan
  • Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coji coji merged commit 8fa3305 into main Mar 16, 2026
6 checks passed
@coji coji deleted the improve/loading-progress branch March 16, 2026 06:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@coji